* {
	margin:0;
	padding:0;
	box-sizing:border-box
}
.group:after,.group:before {
	content:"";
	display:table
}
.group:after {
	clear:both
}
.group {
	zoom:1
}
body {
	background-color:#fff;
	font-family:arial;
	font-size:100%
}
.item {
	float:left
}
.item .block {
	padding-bottom:100%;
	border-radius:6px
}
.item:nth-child(1) .block {
	background-color:#9f9f9f
}
.item:nth-child(2) .block {
	background-color:#999
}
.item:nth-child(3) .block {
	background-color:#7f7f7f
}
.item:nth-child(4) .block {
	background-color:#7b7b7b
}
.item:nth-child(5) .block {
	background-color:#888
}
.item:nth-child(6) .block {
	background-color:#969696
}
.item:nth-child(7) .block {
	background-color:#a6a6a6
}
.item:nth-child(8) .block {
	background-color:#747474
}
.item:nth-child(9) .block {
	background-color:#6c6c6c
}
.item:nth-child(10) .block {
	background-color:#828282
}
.item:nth-child(11) .block {
	background-color:#737373
}
.item:nth-child(12) .block {
	background-color:#bdbdbd
}
.item:nth-child(13) .block {
	background-color:#b3b3b3
}
.item:nth-child(14) .block {
	background-color:#858585
}
.item:nth-child(15) .block {
	background-color:#aaa
}
.item:nth-child(16) .block {
	background-color:#8a8a8a
}
.item:nth-child(17) .block {
	background-color:#8c8c8c
}
.item:nth-child(18) .block {
	background-color:#767676
}
.item:nth-child(19) .block {
	background-color:#989898
}
.item:nth-child(20) .block {
	background-color:#8e8e8e
}
.item:nth-child(21) .block {
	background-color:#b7b7b7
}
.item:nth-child(22) .block {
	background-color:#a7a7a7
}
.item:nth-child(23) .block {
	background-color:#747474
}
.item:nth-child(24) .block {
	background-color:#bebebe
}
.item:nth-child(25) .block {
	background-color:#686868
}
.item:nth-child(26) .block {
	background-color:#696969
}
.item:nth-child(27) .block {
	background-color:#a6a6a6
}
.item:nth-child(28) .block {
	background-color:#787878
}
.item:nth-child(29) .block {
	background-color:#848484
}
.item:nth-child(30) .block {
	background-color:#8d8d8d
}
.item:nth-child(31) .block {
	background-color:#ababab
}
.item:nth-child(32) .block {
	background-color:#adadad
}
.item:nth-child(33) .block {
	background-color:#777
}
.item:nth-child(34) .block {
	background-color:#b1b1b1
}
.item:nth-child(35) .block {
	background-color:#898989
}
.item:nth-child(36) .block {
	background-color:#747474
}
.item:nth-child(37) .block {
	background-color:#b1b1b1
}
.item:nth-child(38) .block {
	background-color:#c4c4c4
}
.item:nth-child(39) .block {
	background-color:#868686
}
.item:nth-child(40) .block {
	background-color:#6b6b6b
}
.item:nth-child(41) .block {
	background-color:#7a7a7a
}
.item:nth-child(42) .block {
	background-color:#909090
}
.item:nth-child(43) .block {
	background-color:#707070
}
.item:nth-child(44) .block {
	background-color:#737373
}
.item:nth-child(45) .block {
	background-color:#747474
}
.item:nth-child(46) .block {
	background-color:#b4b4b4
}
.item:nth-child(47) .block {
	background-color:#959595
}
.item:nth-child(48) .block {
	background-color:#a4a4a4
}
.item:nth-child(49) .block {
	background-color:#7b7b7b
}
.item:nth-child(50) .block {
	background-color:#7a7a7a
}
.item:nth-child(51) .block {
	background-color:#acacac
}
.item:nth-child(52) .block {
	background-color:#c4c4c4
}
.item:nth-child(53) .block {
	background-color:#6f6f6f
}
.item:nth-child(54) .block {
	background-color:#898989
}
.item:nth-child(55) .block {
	background-color:#bebebe
}
.item:nth-child(56) .block,.item:nth-child(57) .block {
	background-color:#9b9b9b
}
.item:nth-child(58) .block {
	background-color:#9e9e9e
}
.item:nth-child(59) .block {
	background-color:#686868
}
.item:nth-child(60) .block {
	background-color:#b2b2b2
}
header {
	text-align:center;
	background-color:#34495e
}
header .wrapper {
	margin:0 auto;
	padding:64px 10px;
	width:960px;
	color:#ecf0f1
}
header h1 {
	margin-bottom:10px;
	font-size:3em;
	font-weight:700;
	line-height:1em
}
header p {
	margin-bottom:20px
}
header .button {
	padding:10px 20px;
	display:inline-block;
	color:#f1c40f;
	text-decoration:none;
	border:2px solid #f1c40f;
	border-radius:6px
}
.section .wrapper {
	margin:0 auto;
	padding:52px 0;
	width:960px
}
.section.section-code {
	background-color:#ecf0f1
}
.section.section-code .wrapper {
	padding:52px 10px
}
.section.section-code code,.section.section-code p {
	margin-bottom:20px
}
.section.section-code a {
	color:#2980b9
}
.section.section-code code {
	padding:20px;
	display:block;
	background-color:#fff;
	border-radius:6px;
	border:2px solid #bdc3c7
}
.section.section-code code:last-child {
	margin-bottom:0
}
.section .buttons {
	padding-bottom:52px;
	text-align:center
}
.section .buttons .button {
	padding:20px;
	display:inline-block;
	color:#fff;
	background-color:#2980b9;
	text-decoration:none;
	border-radius:4px
}
footer {
	background-color:#34495e;
	text-align:right
}
footer .wrapper {
	margin:0 auto;
	padding:32px 10px;
	width:960px;
	font-size:.875em;
	color:#ecf0f1
}
footer a {
	color:#ecf0f1;
	text-decoration:none;
	border-bottom:1px solid rgba(236,240,241,.5)
}
section.modal {
	position:fixed;
	top:0;
	left:0;
	background-color:rgba(0,0,0,.5)
}
section.modal,section.modal .modal-container,section.modal .modal-middle {
	width:100%;
	height:100%
}
section.modal .modal-container {
	display:table
}
section.modal .modal-middle {
	display:table-cell;
	text-align:center;
	vertical-align:middle
}
section.modal .modal-box {
	margin:40px auto;
	padding:10px;
	width:280px;
	background-color:#fff;
	border-radius:4px;
	box-shadow:0 12px 48px 0 rgba(0,0,0,.25)
}
section.modal .modal-box h2,section.modal .modal-box p {
	margin-bottom:20px
}
section.modal .modal-box h2 {
	font-size:1.5em;
	line-height:1em
}
section.modal .modal-box .boxs {
	margin-bottom:20px
}
section.modal .modal-box .buttons .button {
	display:block;
	width:100%;
	height:32px;
	font-family:arial;
	font-size:1em;
	color:#2980b9;
	line-height:30px;
	border:2px solid #2980b9;
	border-radius:4px;
	background-color:#fff
}
@media screen and (max-width:960px) {
	body {
	min-width:320px
}
.section .wrapper,footer .wrapper,header .wrapper {
	margin:0;
	width:100%
}
}@media screen and (max-width:480px) {
	.section .wrapper {
	margin:0;
	width:100%
}
}/*# sourceMappingURL=demo.min.css.map */